<template>
    <div>
        <div class="video-hd">
            <!-- <div>{{ form.ResName }}</div> -->
            <div>{{ title }}：{{ form.CurrentProgress || 0 }}%</div>
            <div>
                <span v-if="form.CurrentProgress != 100">还剩</span>
                <van-count-down v-if="form.CurrentProgress != 100" ref="countDown" :auto-start="false" :time="time" style="color: #ffff; margin: 0 2px" format="HH 时 mm 分 ss 秒" @change="timeChange" />
                <span v-if="form.CurrentProgress != 100">完成学习</span>
            </div>
        </div>
        <div>
            <iframe class="iframe" :src="url"></iframe>
        </div>
    </div>
</template>

<script>
import { CountDown } from "vant";

export default {
    components: { CountDown },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            id: "",
            sid: "",
            stype: "",
            form: {},
            url: "",
            mp4: false,
            pdf: false,
            ppt: false,
            time: 0,
            title: "",
            pageNum: 1,
            pageTotalNum: 1, // 总页数
            loadedRatio: 0,
            numPages: null, // pdf 总页数
        };
    },
    created() {
        var paramID = this.$route.query.id;
        this.id = paramID;

        var paramSID = this.$route.query.sid;
        this.sid = paramSID;

        var paramSType = this.$route.query.stype;
        this.stype = paramSType;
    },
    mounted: function () {
        this.getDetail();
    },
    methods: {
        // 上一页
        prePage() {
            let page = this.pageNum;
            page = page > 1 ? page - 1 : this.pageTotalNum;
            this.pageNum = page;
        },
        loadFinish() {
            if (this.title == "当前学习进度") {
                this.$refs.countDown.start();
            }
            console.log("加载完毕！");
        },

        // 下一页
        nextPage() {
            let page = this.pageNum;
            page = page < this.pageTotalNum ? page + 1 : 1;
            this.pageNum = page;
        },

        timeChange(timeData) {
            let newTime =
                (timeData.days * 60 + timeData.minutes * 60 + timeData.seconds) % 15;
            if (newTime == 0) {
                this.$axios
                    .post("/TrainStudyRecord/Study", {
                        id: this.form.ID,
                        sid: this.sid,
                        stype: this.stype,
                        guid: this.form.CurrentGuid,
                        silence: true,
                    })
                    .then((res) => {
                        this.form.CurrentProgress = res.data.CurrentProgress;
                        if (res.data.CurrentProgress == 100) {
                            this.title = "当前进度";
                        } else {
                            this.title = "当前学习进度";
                        }
                    })
                    .catch((err) => {
                        console.log("err", err);
                    });
            }
        },
        getDetail() {
            const _this = this;
            let params = { id: this.id, sid: this.sid, stype: this.stype };
            this.$axios
                .get("/TrainRes/GetStudyInfo", { params: params })
                .then((res) => {
                    if (res.data.AttMiddlePath.indexOf("http") == -1) {
                        //this.url = this.baseUrl + res.data.AttMiddlePath;
                        _this.url =
                            this.baseUrl +
                            "/Plugins/pdfjs/web/viewer.html?file=" +
                            res.data.AttMiddlePath;
                    } else {
                        _this.url =
                            "/Plugins/pdfjs/web/viewer.html?file=" + res.data.AttMiddlePath;
                    }
                    _this.form = res.data;
                    if (res.data.CurrentProgress == 100) {
                        _this.title = "当前进度";
                    } else {
                        _this.title = "当前学习进度";
                        _this.time = res.data.LeftStudyHours * 60 * 1000;
                        _this.$nextTick(() => {
                            _this.$refs.countDown.start()
                        })
                    }
                });
        },
    },
};
</script>

<style lang="less" scoped>
.video-hd {
    z-index: 99;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}
.video-hd > div {
    display: flex;
    align-items: center;
}
.video {
    width: 100%;
    height: calc(100vh - 85px);
}
.iframe {
    width: 100%;
    height: calc(100vh - 85px);
}
// .fixed {
// 	position: fixed;
// 	top: 0;
// 	left: 0;
// 	bottom: 0;
// 	right: 0;
// 	background: #000;
// }

// .transform-rotate {
// 	position: fixed;
// 	top: 0;
// 	bottom: 0;
// 	transform-origin: 0 50%;
// 	transform: rotate(90deg) translate(-50%, -4%);
// }
</style>